<template>
    <div class="detailcontext">
        <p class="detailcontext-title">{{title}}</p>
        <div class="detailcontext-center">
            <a class="detailcontext-center-singer" href="#">歌手：{{singer}}</a>
            <p class="detailcontext-center-paly">播放：{{showplayCount}}</p>
        </div>
        <p class="detailcontext-end">发行：{{palydate}}</p>
    </div>
</template>

<script>

    export default {
        name: "DetailContext",
        props:{
            title:String,
            singer:String,
            palynumber:String,
            palydate:String,

        },


        computed:{
            showplayCount(){
                return this.testPlayCount(this.palynumber);
            }
        },
        methods: {
            testPlayCount(playCount) {
                if (playCount * 1 > 10000) {
                    var i = playCount / 10000
                    return i.toFixed(1) + "万";
                } else {
                    return playCount;
                }
            }
        }
    }
</script>

<style scoped>
    .detailcontext{
        width: 100%;
        margin-left: 15px;
    }
    .detailcontext-title{
        margin-top: 4px;
        margin-bottom: 10px;
        font-weight: 600;
        font-family:"微软雅黑 Light";
        font-size: 17px;
        white-space: nowrap;  /* 不允许换行 */
        overflow: hidden;  /* 隐藏 */
        text-overflow:ellipsis;
    }
    .detailcontext-center{
        display: flex;
        justify-content:space-between;
        margin-bottom: 10px;
    }
    .detailcontext-center-paly{
        margin-right: 30px;
        font-size: 10px;
    }
    .detailcontext-center-singer{
        color: deepskyblue;
        font-size: 12px;
    }
    .detailcontext-end{
        font-size: 10px;
    }
</style>